<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/11/22
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.9.0
  -->

<template>
  <div><div class="abstatic-height"></div>
     <div class="anly-app-container calendar-list-container">
        <el-row>
          <div class="filter-withline line-with-verticl"><div class="line-with-verticl over-topline"></div>
          <div class="filter-wrap">
            <div class="filter-item">
              <el-radio v-model="radio" label="1" @change="toggleTime('1')" style="padding-left: 10px;">固定时间</el-radio>
            </div>
            <div class="filter-item">
              <div style="padding-left: 10px;">
                <el-radio-group v-model="listDate.tag" :disabled="radio === '1' ? false : true" size="mini" @change="changeDate">
                  <el-radio-button label="0">今天</el-radio-button>
                  <el-radio-button label="1">昨天</el-radio-button>
                  <el-radio-button label="2">最近7天</el-radio-button>
                  <el-radio-button label="3">最近30天</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="filter-item">
              <el-radio v-model="radio" label="2" @change="toggleTime('2')" style="padding-left: 70px;">自定义时间</el-radio>
            </div>
            <div class="filter-item">
              <el-date-picker  size="mini" :picker-options="pickerBeginDateBefore" :disabled="radio === '2' ? false : true" v-model="listDate.dateStrs" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </div>
            <div class="filter-item">
              <el-button type="primary" style="margin:5px 0 5px 30px" size="mini" @click="handleFilter">确定</el-button>
            </div>
          </div>
          </div>
        </el-row>
         <el-container>
           <el-aside width="300px">
             <div class="aside-withline">
               <div class="wrap-with-halfboder"></div>
             <div class="list">
               <p><i class="el-icon-caret-right"></i>隐患处理情况</p>
               <div class="handle-defect" id="handle_defect" ref="tabledefect"></div>
             </div>
             <div class="list">
               <p style="padding: 50px 0 20px 29px;"><i class="el-icon-caret-right"></i>隐患类型分布</p>
               <div class="table_one" id="table_one" style="height: 270px;" ref="tableone">
               </div>
             </div>
             </div>
           </el-aside>
            <el-main style="height: 100%;text-align:left;overflow:auto;" class="anly-main">
                <div class="anly-main-wrap">
                  <div class="wrap-with-halfboder"></div>
                    <el-row>
                      <div class="list anly-main-chart">
                        <p><i class="el-icon-caret-right"></i>隐患变化趋势</p>
                        <div class="table_two" id="table_two" ref="tabletwo">
                        </div>
                      </div>
                    </el-row>
                      <div class="filter-result-wraplist">
                        <div class="filter-result-left">
                          <div class="list">
                            <p><i class="el-icon-caret-right"></i>报警TOP10</p>
                            <div class="table_three">
                              <el-table :data="list" style="width: 100%">
                                <el-table-column label="排名">
                                  <template slot-scope="scope">
                                    <span style="color: #50E3C2">NO.{{scope.row.id}}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column label="建筑名" >
                                  <template slot-scope="scope">
                                    <span>{{scope.row.name}}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="time" label="次数">
                                  <template slot-scope="scope">
                                    <span>{{scope.row.count}}</span>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </div>
                          </div>
                        </div>
                        <div class="filter-result-right">
                          <div class="list">
                            <p><i class="el-icon-caret-right"></i>故障TOP10</p>
                            <div class="table_three">
                              <el-table :data="slist" style="width: 100%">
                                <el-table-column label="排名">
                                  <template slot-scope="scope">
                                    <span style="color: #50E3C2">NO.{{scope.row.id}}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column label="建筑名" >
                                  <template slot-scope="scope">
                                    <span>{{scope.row.name}}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="time" label="次数">
                                  <template slot-scope="scope">
                                    <span>{{scope.row.count}}</span>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </div>
                          </div>
                        </div>
                      </div>
                </div>
            </el-main>
        </el-container>
     </div>
     </div>
</template>
<script>
import echarts from 'echarts'
import {
  getDefect,
  CountByType,
  CountByMonth,
  selectCountByBuild,
} from "@/api/device/statisticAnly/index";
export default {
    data() {
        return{
            value: '',
            radio: '1',
            list: [],
            slist:[],
            typeList:[],
            type:'',
            time: '',
            pickerBeginDateBefore:{
              disabledDate: time => {
                // let _now = Date.now();
                // let _nowbefore30day = new Date(_now - 1000 * 60 * 60 * 24 * 30);
                // return time.getTime() > _now||time.getTime()<_nowbefore30day.getTime();
                return time.getTime() > Date.now() - 8.64e6
              }
            },
            listDate:{
                dateStrs:null,
                tag: "0",
                channelId:null
            },
            params:{
                channelId:"",
            },
            isnonetype:false,
            isnonetime:false
        }
    },
    mounted() {
        this.fetchData();
    },
    watch:{
        '$route':'fetchData'
    },
    methods: {
        fetchData(){
            let vm = this;
            vm.params.channelId=vm.$route.params.id;
            vm.toggleTime('1');
            vm.buildCount();
            vm.initChart1();
            vm.initChart2();
            vm.handleDefectChart();
        },
        handleDefectChart(){
          let dateStrs;
          if(this.listDate.dateStrs){
            dateStrs = (this.listDate.dateStrs).toString();
          }
          getDefect(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs})).then(res=>{
            this.isnonetime = res.data.length === 0;
            let ayarr = [{value:res.data.callCount,name:'未处理'},
              {value:res.data.handleCount,name:'已处理'}];
            let stringarr = ['未处理','已处理'];
            var handleChart = echarts.init(this.$refs.tabledefect);
            var option = {
              tooltip : {
                trigger: 'item',
                formatter: "{b} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                icon:'circle',
                right: '10',
                top:'center',
                textStyle: {
                  color: 'rgba(80, 227, 194, 0.7)'
                },
                data: stringarr,
                color:['#50E3C2','#EB7E10'],
              },
              series : [
                {
                  name:'',
                  type: 'pie',
                  radius: ['32%', '70%'],
                  center: ['42%', '50%'],
                  data:ayarr,
                  color:['#50E3C2','#EB7E10'],
                  label:{
                    show: true,
                    formatter: '{c}个',
                  }
                },
                {
                  type: 'pie',
                  radius: ['32%', '70%'],
                  center: ['42%', '50%'],
                  data:ayarr,
                  color:['#50E3C2','#EB7E10'],
                  itemStyle: {
                    normal:{
                      label:{
                        show : true,
                        position : 'inner',
                        formatter: '{d}%',
                        textStyle:{
                          color:'#ffffff'
                        }
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                  }
                }
              ]
            };
            handleChart.setOption(option);
          })
        },
	    changeDate(day){
		    let dnum = 30
            switch (day) {
	            case '0': {
		            dnum = 0;
		            break;
	            }
	            case '1': {
		            dnum = 1;
		            break;
	            }
	            case '2': {
		            dnum = 7;
		            break;
	            }
	            case '3': {
		            dnum = 30;
		            break;
	            }
	            default: {
		            break;
	            }
            }
            let days = this.timeForMat(dnum)
		    this.listDate.dateStrs = days
		    this.handleFilter()
        },
	    timeForMat(count){
		    // 拼接时间
		    const time1 = new Date()
		    const time2 = new Date()
		    if (count === 1) {
			    time1.setTime(time1.getTime() - (24 * 60 * 60 * 1000))
		    } else {
			    if (count >= 0) {
				    time1.setTime(time1.getTime())
			    } else {
				    if (count === -2) {
					    time1.setTime(time1.getTime() + (24 * 60 * 60 * 1000) * 2)
				    } else {
					    time1.setTime(time1.getTime() + (24 * 60 * 60 * 1000))
				    }
			    }
		    }

		    const Y1 = time1.getFullYear()
		    const M1 = ((time1.getMonth() + 1) > 9 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
		    const D1 = (time1.getDate() > 9 ? time1.getDate() : '0' + time1.getDate())
		    const timer1 = Y1 + '-' + M1 + '-' + D1

		    time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * count))
		    const Y2 = time2.getFullYear()
		    const M2 = ((time2.getMonth() + 1) > 9 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
		    const D2 = (time2.getDate() > 9 ? time2.getDate() : '0' + time2.getDate())
		    const timer2 = Y2 + '-' + M2 + '-' + D2
		    return [timer2, timer1]
        },
        //火灾报警类型分布
        initChart1() {
            let dateStrs;
           if(this.listDate.dateStrs){
                dateStrs = (this.listDate.dateStrs).toString();
           }
             CountByType(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs})).then(res=>{
               if (!res.data||res.data.length===0) {
                this.typeList = [];
                this.isnonetype=true;
               }else{
                this.isnonetype=false;
                this.typeList = res.data;
               }
                const type_arr = [];
                const dataStruct = [];
                for(let obj of this.typeList){
                    let alrmType = obj.alrmType;
                    dataStruct.push({value: obj.count, name: alrmType}); //重新组成对象
                    type_arr.push(alrmType); //把所有的类型放在数组里
                }
                var chart1 = echarts.init(this.$refs.tableone);
                var option = {
                    tooltip : {
                      trigger: 'axis',
                      axisPointer:{
                        type: 'shadow'
                      }
                    },
                    grid:{
                       left:'3%',
                       right:'4%',
                       bottom:'3%',
                       top:'3%',
                       containLabel: true
                    },
                  xAxis: {
                    color:'#fff',
                    splitLine : {//去掉网格线
                      show : true,
                      lineStyle:{
                        color:'rgba(80, 227, 194, 0.3)',
                        type:'dashed'
                      }
                    },
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLabel : {//坐标轴刻度标签的相关设置
                      show : true,
                      textStyle : {
                        color : 'rgba(80, 227, 194, 0.3)',
                        align : 'right',
                        fontSize: 12
                      }
                    },
                    axisLine : {
                      lineStyle : {
                        color : 'rgba(80, 227, 194, 0.3)'
                      }
                    },
                    axisTick : {
                      lineStyle : {
                        color : 'rgba(80, 227, 194, 0.3)'
                      }
                    },
                  },
                  yAxis: {
                    type: 'category',//轴的类型分两种 1.category（类别）2.value(值)
                    data: type_arr,
                    axisLabel : {
                      show : true,
                      textStyle : {
                        color : 'rgba(80, 227, 194, 0.7)',
                        align : 'right',
                        fontSize: 12    /*文字大小*/
                      }
                    },
                    axisLine : {
                      lineStyle : {
                        color : 'rgba(80, 227, 194, 0.3)'//轴的颜色
                      }
                    },
                    axisTick : {
                      lineStyle : {
                        color : 'rgba(80, 227, 194, 0.3)'//轴上点的颜色
                      }
                    },

                  },
                    series : [
                        {
                            name:'',
                            type: 'bar',
                            data:dataStruct,
                            label : {
                              normal : {
                                show : true,//显示数字
                                position : 'right',
                                textStyle : {
                                  fontSize : '14',//柱状上的显示的文字
                                  color:'#50E3C2'
                                }
                              }
                            },
                            barWidth : 30,//柱子宽度
                            itemStyle: {
                              normal: {
                                color:new echarts.graphic.LinearGradient(
                                  0, 0, 1, 0,
                                  [
                                    {offset: 0, color: 'rgba(80, 227, 194, 0)'},
                                    {offset: 1, color: '#3DA996'}
                                  ]
                                )
                              }
                            }
                        }
                    ]
                };
            chart1.setOption(option);

           })

       },
       //火灾报警时间分布
       initChart2() {
        let dateStrs;
           if(this.listDate.dateStrs){
                dateStrs = (this.listDate.dateStrs).toString();
           }
          CountByMonth(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs})).then(res=>{
            this.isnonetime = res.data.length === 0;
            let date_arr = res.data.dateList;
            let callList = res.data.callList;
            let faultList = res.data.faultList;

            var chart2 = echarts.init(this.$refs.tabletwo);

            var option = {
                grid:{
                  left:60,
                  right:40,
                  bottom:20,
                  top:50
                },
                tooltip : {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                legend:{
                  icon:'roundRect',
                  orient: 'vertical',
                  textStyle: {
                    color: 'rgba(80, 227, 194, 0.7)'
                  },
                  itemHeight:3,
                  left:'right',
                  top:'top',
                  data:['火警','故障']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date_arr,
                    axisLine:{
                      show:false,
                      lineStyle:{
                        color:"rgba(80, 227, 194, 0.3)"
                      }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                      show:false,
                      lineStyle:{
                        color:"rgba(80, 227, 194, 0.3)"
                      }
                    },
                    splitLine:{
                      show:true,
                      lineStyle:{
                        color:'rgba(80, 227, 194, 0.3)'
                      }
                    }
                },
                 dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    },
                ],
                series: [
                    {
                        type:'line',
                        name:'火警',
                        smooth:true,
                        symbol: 'none',
                        showAllSymbol: true,
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: '#E4393C'
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#E4393C'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,0,0,0)'
                                }])
                            }
                        },
                        data: callList
                    },
                  {
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    name:'故障',
                    showAllSymbol: true,
                    sampling: 'average',
                    itemStyle: {
                      normal: {
                        color: '#F5A623'
                      }
                    },
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#F5A623'
                        }, {
                          offset: 1,
                          color: 'rgba(0,0,0,0)'
                        }])
                      }
                    },
                    data: faultList
                  }
                ]
            };
           chart2.setOption(option);
           })

       },
       //火灾报警建筑排名
       buildCount() {
           let dateStrs;
           if(this.listDate.dateStrs){
                dateStrs = (this.listDate.dateStrs).toString();
           }
           selectCountByBuild(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs},{alrmCategory:1})).then(res=>{
               this.list = res.data;
           });
           selectCountByBuild(Object.assign({},this.listDate,this.params,{dateStrs:dateStrs},{alrmCategory:0})).then(res=>{
             this.slist = res.data;
           })
       },
       handleFilter() {
          this.initChart1();
          this.initChart2();
          this.handleDefectChart();
          this.buildCount();
       },
       toggleTime(value) {
           if(value == '1'){
                this.listDate.dateStrs = undefined;
                this.listDate.tag="3";
           }else {
                this.listDate.tag = undefined;
           }
           this.radio=value;
       },
    }
}
</script>
<style lang="scss">
.anly-app-container {
    padding-top: 0;
    padding-left: 27px;
    padding-right: 27px;
  .filter-withline{
    border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    .over-topline{
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);
    }
  }
  .filter-wrap{
    display: flex;
    align-items: center;
    .filter-item{
      .el-radio-button__orig-radio:checked + .el-radio-button__inner{
        background: rgba(0, 0, 0, 0.3);
      }
      .el-radio-button__inner{
        border-left: 1px solid rgba(80, 227, 194, 0.3) !important;
        border-radius: 0;
        font-weight: normal;
      }
      .el-radio-button:first-child .el-radio-button__inner{
        border-left: 0 !important;
      }
    }
  }
  .aside-withline{
    position: relative;
    height: 720px;
    background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
    color: #50E3C2;
    .list{
      padding-top:12px;
      &>p{
        padding-left: 29px;
        margin: 0;
        i{
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
  .handle-defect{
    width: 100%;
    height: 200px;
  }
 .table_one {
     width: 100%;
 }
 .table_two,.table_three {
     width: 100%;
 }
  .table_two{
    height: 209px;
  }
  .anly-main{

    .anly-main-wrap{
      min-height: 720px;
      background: linear-gradient(-140deg, transparent 2em, #0A1722 0);
      position: relative;
      .filter-result-wraplist{
        display: flex;
        padding: 40px 20px 20px 22px;
        &>div{
          flex: 1;
        }
        .filter-result-left{
          margin-right: 50px;
        }
      }
    }
    .anly-main-chart{
      margin: 0 20px;
    }
    .list{
      color: #50E3C2;
      &>p{
        i{
          color: rgba(80, 227, 194, 0.5);
        }
      }
    }
  }
 .el-aside {
     height: 800px;
     padding: 22px 0;
 }
 .el-date-editor--daterange.el-input__inner{
   width: 265px;
   margin-left: 10px;
 }
}
</style>



